<script setup lang="ts">
import {useAttrs, useSlots} from 'vue';

import AInput from './components/AInput.vue';
import ASelect from './components/ASelect.vue';
import ATreeSelect from './components/ATreeSelect.vue';
import ADateRangePicker from './components/ADateRangePicker.vue';
import AInputNumber from './components/AInputNumber.vue';
import ASwitch from './components/ASwitch.vue';
import ARadio from './components/ARadio.vue';
import {type FormItem} from './form.type.d';

const attrs = useAttrs();
const slots: any = useSlots();
const props = withDefaults(
  defineProps<{
    formData: any; // 表单响应式数据对象
    formItem: FormItem[]; // 表单渲染列表
    validateInfos: any; // 表单响应式验证规则对象
    className?: string; // 类型
    formItemCol?: string;
    labelColLayout?: string;
    formItemStyles?: any;
    query?: boolean; // 是否开启查询操作
  }>(),
  {
    formData: () => {},
    formItem: () => [],
    validateInfos: () => {},
    formItemCol: 'horizontal', // horizontal: 水平的 vertical:垂直的
    labelColLayout: 'vertical', // horizontal: 水平的 vertical:垂直的
    formItemStyles: () => {}, // horizontal: 水平的 vertical:垂直的
    query: true, // horizontal: 水平的 vertical:垂直的
  },
);
const {formData, validateInfos, formItemCol, query, labelColLayout, formItemStyles} = props;

const emit = defineEmits<{
  submit: [];
  reset: [];
}>();

// const labelCol = {span: 4};
// const labelCol = {span: 24};
const selectLabelCol = () => {
  if (labelColLayout && labelColLayout === 'horizontal') {
    return {span: 0};
  }
  return {span: 24};
};
const wrapperCol = {span: 20};
const rowGutter = [16, 4];
const layout = 'horizontal'; // horizontal vertical inline

const formItemStyle = (item: {[key: string]: any}) => {
  if (item?.style) {
    return item.style;
  }
  if (formItemStyles) {
    return formItemStyles;
  }
  if (labelColLayout === 'horizontal') {
    return {paddingTop: '8px'};
  }
  return {};
};

const onSubmit = () => {
  emit('submit');
  // console.log('onSubmit');
};
const onReset = () => {
  emit('reset');
};

const selectCol = (item: {[key: string]: any}) => {
  if (item.col) {
    return item.col;
  }
  if (formItemCol && formItemCol === 'horizontal') {
    return 6;
  } else if (formItemCol && formItemCol === 'vertical') {
    return 24;
  }
  return 6;
};
</script>

<template>
  <div class="common-form">
    <a-form
      :label-col="selectLabelCol()"
      :wrapper-col="wrapperCol"
      autocomplete="off"
      :class="className"
      v-bind="attrs"
      :layout="layout"
    >
      <a-row :gutter="rowGutter">
        <template v-for="item in props.formItem" :key="item.id">
          <a-col :md="selectCol(item)">
            <a-form-item v-if="item.itemType === 'input'" :label="item.label" v-bind="validateInfos[item.itemKey]">
              <AInput v-model:value="formData[item.itemKey]" :item="item" v-bind="item" />
            </a-form-item>
            <a-form-item
              v-if="item.itemType === 'select'"
              :label="item.label"
              v-bind="validateInfos[item.itemKey]"
              :style="formItemStyle(item)"
            >
              <ASelect v-model:value="formData[item.itemKey]" :item="item" v-bind="item" />
            </a-form-item>
            <a-form-item
              v-if="item.itemType === 'tree-select'"
              :label="item.label"
              v-bind="validateInfos[item.itemKey]"
              :style="formItemStyle(item)"
            >
              <ATreeSelect v-model:value="formData[item.itemKey]" :item="item" v-bind="item" />
            </a-form-item>
            <a-form-item
              v-if="item.itemType === 'date-range-picker'"
              :label="item.label"
              v-bind="validateInfos[item.itemKey]"
              :style="formItemStyle(item)"
            >
              <ADateRangePicker v-model:value="formData[item.itemKey]" :item="item" v-bind="item" />
            </a-form-item>
            <a-form-item
              v-if="item.itemType === 'input-number'"
              :label="item.label"
              v-bind="validateInfos[item.itemKey]"
              :style="formItemStyle(item)"
            >
              <AInputNumber v-model:value="formData[item.itemKey]" :item="item" v-bind="item" />
            </a-form-item>
            <a-form-item
              v-if="item.itemType === 'switch'"
              :label="item.label"
              v-bind="validateInfos[item.itemKey]"
              :style="formItemStyle(item)"
            >
              <ASwitch v-model:value="formData[item.itemKey]" :item="item" v-bind="item" />
            </a-form-item>
            <a-form-item
              v-if="item.itemType === 'radio'"
              :label="item.label"
              v-bind="validateInfos[item.itemKey]"
              :style="formItemStyle(item)"
            >
              <ARadio v-model:value="formData[item.itemKey]" :item="item" v-bind="item" />
            </a-form-item>
          </a-col>
        </template>
      </a-row>
      <div style="display: flex; align-items: center; margin-top: 15px">
        <slot name="render_left"></slot>
        <div v-if="query" style="flex: 1; display: flex; justify-content: flex-end">
          <a-button type="primary" @click.prevent="onSubmit">查询</a-button>
          <a-button style="margin-left: 10px" @click="onReset">重置</a-button>
        </div>
      </div>
      <slot name="render_footer"></slot>
    </a-form>
  </div>
</template>

<style lang="less">
.common-form {
  .ant-form-item-control {
    max-width: 100%;
  }
  .ant-form-item {
    margin-bottom: 5px !important;
  }
  .ant-form-item-label {
    padding-bottom: 0 !important;
  }
  .ant-form-item-control-input {
    // min-height: auto;
  }
}
</style>
